<template>
  <div>
  <div>
<!--    <el-input  clearable placeholder="模糊查询" @keyup.enter.native="onsearch"/>-->
  </div>
    <ul>
    <vuedraggable v-model="keys">

          <li v-for="(key,index) in keys" style="margin-bottom:10px;cursor: pointer;">
            {{ key }}
            <svgicon icon-class="delete" @click.native="()=>{
         keys.splice(index,1)
        }"></svgicon>
            <svgicon  style="margin-left: 10px" icon-class="upup" @click.native="()=>{
            var key=keys.splice(index,1)
            key&&key[0]&&keys.unshift(key&&key[0])
        }"

        ></svgicon>
          </li>

    </vuedraggable>
    </ul>

  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'

import svgicon from '@base/svg-icon'
import { deepClone } from '@/utils';
export default {
  data() {
    return {
     querysearch:'',
      keys: [],
    };
  },
  components: {
    vuedraggable,
    svgicon,
  },
  methods: {
    async initByDialog(_data) {
     this.source_keys=deepClone(_data && _data.keys)
      this.keys = deepClone(this.source_keys)
    },
    onsearch() {
     this.keys=deepClone(this.source_keys).filter(key=>key?.indexOf(this.querysearch)>=0)

    },

    async submitByDialog() {
      //validate
      //data operation
      //ajax 提交
      return { success: true ,data:this.keys};
    },
  },
};
</script>
